<template>
	<div class="manpower-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="property-main">
				<!-- 上方元素 -->
				<div class="main-top">
					<!-- 左边 -->
					<div class="dataScreen-lf">
						<div class="lf-top">
							<ItemTitle2 :itemTitleImg="postItemTitleImgObj['员工缺口情况']">
							</ItemTitle2>
							<div class="lf-top-cn">
								<scroll-board
									:config="gapConfig"
									:style="{ width: '100%', height: tableHeight1 + 'px' }"
								/>
								<!-- <el-table
									:data="employee_gap_list"
									style="width: 100%"
									:max-height="tableHeight1"
									header-row-class-name="table-head"
									row-class-name="table-row"
									class="table-box"
								>
									<el-table-column prop="department" label="部门" />
									<el-table-column
										prop="zp_achievement_num"
										label="招聘达成人数需求"
										width="150"
									/>
									<el-table-column prop="recruited_num" label="已完成人数" />
									<el-table-column prop="achievement_rate" label="达成率">
										<template #default="scope">
											<span>
												{{
													Math.round((scope.row.achievement_rate || 0) * 100) +
													"%"
												}}
											</span>
										</template>
									</el-table-column>
								</el-table> -->
							</div>
						</div>
						<div class="lf-center">
							<ItemTitle2 :itemTitleImg="postItemTitleImgObj['员工总人数波动']">
							</ItemTitle2>
							<div class="lf-center-cn">
								<personChart ref="personChartRef"></personChart>
							</div>
						</div>
						<div class="lf-bottom">
							<ItemTitle2 :itemTitleImg="postItemTitleImgObj['人员波动排名']">
							</ItemTitle2>
							<div class="lf-bottom-cn">
								<sortChart ref="sortChartRef"></sortChart>
							</div>
						</div>
					</div>
					<!-- 中间 -->
					<div class="dataScreen-ct">
						<div class="ct-top">
							<div class="ct-top-cn">
								<div class="data-box">
									<div
										v-for="(item, idx) in centerData"
										class="item-box"
										:key="idx"
									>
										<span>{{ item.title }}：</span>
										<span>{{ item.value }}</span>
									</div>
								</div>
								<div class="pie-box">
									<div class="pie-left">
										<div>
											<img
												src="@/assets/screenImg/powerImg/center/sexRate.png"
												alt=""
											/>
										</div>
										<div>
											<sexChart ref="sexChartRef"></sexChart>
										</div>
									</div>
									<div class="pie-right">
										<div>
											<img
												src="@/assets/screenImg/powerImg/center/partyRate.png"
												alt=""
											/>
										</div>
										<div>
											<partyChart ref="partyChartRef"></partyChart>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="ct-bottom">
							<div class="ct-bottom-cn">
								<div class="cn-title">
									<span>
										<img
											src="@/assets/screenImg/powerImg/centerTitle.png"
											alt=""
										/>
									</span>
									<div>
										<div>
											<span>在编人数：</span>
											<span>{{ zbrs }}人</span>
										</div>
										<div>
											<span>非在编人数：</span>
											<span>{{ fzbrs }}人</span>
										</div>
									</div>
								</div>
								<div class="cn-content">
									<structureChart
										ref="structureChartRef"
										@on-node-click="onNodeClick"
									></structureChart>
								</div>
							</div>
						</div>
					</div>
					<!-- 右边 -->
					<div class="dataScreen-rg">
						<div class="rg-top">
							<ItemTitle2 :itemTitleImg="postItemTitleImgObj['各部门人力成本']">
								<template #rightCnBox>
									<span @click="viewDetail">查看详情</span>
								</template>
							</ItemTitle2>
							<div class="rg-top-cn">
								<powerChart
									:chartData="department_manpower_cost"
									ref="powerChartRef"
								></powerChart>
							</div>
						</div>
						<div class="rg-bottom">
							<ItemTitle
								@clickItem="clickItem"
								:isActive="!showDepartmentPerformance"
								:itemTitleImg="
									!showDepartmentPerformance
										? postItemTitleImgObj['员工职级列表']
										: postItemTitleImgObj['员工职级列表未选中']
								"
							>
								<template #rightCnBox>
									<div
										class="m-l50"
										style="cursor: pointer"
										@click="achieveSort"
									>
										<img
											:class="{
												notActive: !showDepartmentPerformance,
												active: showDepartmentPerformance,
											}"
											:src="
												showDepartmentPerformance
													? postItemTitleImgObj['绩效排名']
													: postItemTitleImgObj['绩效排名未选中']
											"
											alt=""
											@click="achieveSort"
										/>
									</div>
								</template>
							</ItemTitle>
							<div class="rg-bottom-cn">
								<scroll-board
									:config="gradeConfig"
									:style="{ width: '100%', height: tableHeight2 + 'px' }"
									class="list"
									v-if="!showDepartmentPerformance"
								/>
								<scroll-board
									:config="performConfig"
									:style="{ width: '100%', height: tableHeight2 + 'px' }"
									class="list"
									v-else
								/>
								<!-- <el-table
									:data="employee_grade_list"
									style="width: 100%"
									:max-height="tableHeight2"
									header-row-class-name="table-head"
									row-class-name="table-row"
									class="table-box"
									v-if="!showDepartmentPerformance"
								>
									<el-table-column
										prop="staff_name"
										label="姓名"
										min-width="14%"
									/>
									<el-table-column prop="gender" label="性别" min-width="14%" />
									<el-table-column prop="title" label="职级" min-width="14%" />
									<el-table-column
										prop="department"
										label="部门"
										min-width="14%"
									/>
								</el-table> -->
								<!-- <el-table
									:data="department_performance_list"
									style="width: 100%"
									:max-height="tableHeight2"
									header-row-class-name="table-head"
									row-class-name="table-row"
									class="table-box"
									v-else
								>
									<el-table-column label="排名" type="index" width="50">
									</el-table-column>
									<el-table-column
										prop="department"
										label="部门名称"
										min-width="50%"
									/>
									<el-table-column
										prop="kpi_score"
										label="绩效等级"
										min-width="25%"
									/>
								</el-table> -->
							</div>
						</div>
					</div>
				</div>
				<!-- 下方元素 -->
				<div class="main-bottom">
					<div class="bottom-title">
						<ItemTitle2 :itemTitleImg="postItemTitleImgObj['员工画像']">
						</ItemTitle2>
					</div>
					<div class="main-bottom-cn">
						<!--            <div class="select-box">-->
						<el-form :model="employeePortrait" class="select-box">
							<div
								v-for="(item, idx) in selectArr"
								class="select-item"
								:key="idx"
							>
								<span>{{ item.title }}</span>
								<div class="m-l10">
									<SelectTool
										:optionsArr="item.options"
										:getWidth="'150'"
										v-model="employeePortrait[item.titleKey]"
										clearable
									></SelectTool>
								</div>
							</div>
						</el-form>
						<!--            </div>-->
						<div class="table-container">
							<el-table
								:data="employeePortraitList"
								style="width: 100%"
								:max-height="tableHeight3"
								header-row-class-name="table-head"
								row-class-name="table-row"
								class="table-box"
							>
								<el-table-column prop="name" label="姓名">
									<template #default="scope">
										<span>
											{{ scope.row.staff_name }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="department" label="部门">
									<template #default="scope">
										<span>
											{{ scope.row.department }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="age" label="年龄">
									<template #default="scope">
										<span>
											{{ scope.row.age }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="gender" label="性别">
									<template #default="scope">
										<span>
											{{ scope.row.gender }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="education" label="学历">
									<template #default="scope">
										<span>
											{{ scope.row.education }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="kpi_score" label="绩效分数">
									<template #default="scope">
										<span>
											{{ scope.row.kpi_score }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="kpi_score" label="升迁建议">
									<template #default="scope">
										<span>
											{{ scope.row.suggest_promotion }}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="kpi_score" label="辞职风险">
									<template #default="scope">
										<span>
											{{ scope.row.risk_resignation }}
										</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted,
	onBeforeUnmount,
	nextTick,
	watch,
} from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale, calcHeight } from "../utils/handelScreen";
import ItemTitle from "../property/components/ItemTitel";
import ItemTitle2 from "../finance/components/ItemTitle";
import SelectTool from "../components/SlecetTool";
import { ElTable } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import personChart from "./components/personChart.vue";
import sortChart from "./components/sortChart.vue";
import sexChart from "./components/sexChart.vue";
import partyChart from "./components/partyChart.vue";
import powerChart from "./components/powerChart.vue";
import structureChart from "./components/structureChart.vue";
import {
	getManPowerCompanyList,
	getManPowerCostList,
	getManPowerLackList,
	getManPowerRankingList,
	getManPowerRankList,
	getManPowerTotalList,
	getManPowerPortraitList,
	getManPowerPortraitSelectList,
	getManPowerDepartmentSelectList,
	getManPowerDepartmentList,
} from "@/api/dashboard/manPower";

const postTitleImg = require("@/assets/screenImg/powerImg/headTitle.png");
const postItemTitleImgObj = reactive({
	员工缺口情况: require("@/assets/screenImg/powerImg/title1.png"),
	员工总人数波动: require("@/assets/screenImg/powerImg/title2.png"),
	人员波动排名: require("@/assets/screenImg/powerImg/title3.png"),
	各部门人力成本: require("@/assets/screenImg/powerImg/title4.png"),
	员工职级列表: require("@/assets/screenImg/powerImg/title5.png"),
	员工职级列表未选中: require("@/assets/screenImg/powerImg/title5_notActive.png"),
	员工画像: require("@/assets/screenImg/powerImg/title6.png"),
	绩效排名: require("@/assets/screenImg/powerImg/title7.png"),
	绩效排名未选中: require("@/assets/screenImg/powerImg/title7_notActive.png"),
});
//右边
let viewDetail = () => {};

let tableHeight3 = ref();
const personChartRef = ref();
const sortChartRef = ref();
const sexChartRef = ref();
const partyChartRef = ref();
const structureChartRef = ref();
const powerChartRef = ref();
const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
	chart4: null,
	// chart5: null,
	chart6: null,
});

const initAllCharts = () => {
	screenChartObj.chart1 = personChartRef.value?.initPersonChart(
		employee_num_list.xArr,
		employee_num_list.dataArr
	);
	screenChartObj.chart2 = sortChartRef.value?.initSortChart(
		staff_fluctuation_ranking_table.xArr,
		staff_fluctuation_ranking_table.dataArr
	);
	screenChartObj.chart3 = sexChartRef.value?.initSexChart(
		company_personnel_stats_charts.sex
	);
	screenChartObj.chart4 = partyChartRef.value?.initPartyChart(
		company_personnel_stats_charts.party
	);
	screenChartObj.chart5 = structureChartRef.value?.initTreeOrgData(treeOrgData);
	screenChartObj.chart6 = powerChartRef.value?.initPowerChart(
		department_manpower_cost.value
	);
};

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};
// region 人员缺口情况
let tableHeight1 = ref();
const employee_gap_list = ref([]);
let gapConfig = ref({
	header: [
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>部门</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>招聘达成人数需求</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>已完成人数</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #D4EDFD;'>达成率</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 3,
});
const getLickList = async () => {
	const { httpStatusCode, data } = await getManPowerLackList();
	if (httpStatusCode === 200) {
		employee_gap_list.value = data.records;
		if (data.records) {
			gapConfig.value.data = data.records.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.department}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.zp_achievement_num}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.recruited_num}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">
            ${Math.round((item.achievement_rate || 0) * 100)}%</span>`,
				];
			});
		}
	}
};
// endregion

// region 人员总人数波动
const employee_num_list = reactive({
	xArr: [],
	dataArr: [],
});
const getManPowerTotal = async () => {
	const params = {
		year: new Date().getFullYear(),
	};
	const { httpStatusCode, data } = await getManPowerTotalList(params);
	if (httpStatusCode === 200) {
		// 组装图表需要的数据并排序(后端返回时没按顺序返回)
		let temp = data.records
			.map((item) => {
				return {
					xArr: item.month,
					dataArr: item.staff_num,
				};
			})
			.sort((a, b) => {
				return Number(a.xArr) - Number(b.xArr);
			});
		// 再分别加到对应的数组中
		temp.forEach((item) => {
			employee_num_list.xArr.push(item.xArr);
			employee_num_list.dataArr.push(item.dataArr);
		});
	}
};
// endregion

// region 人员波动排名表
const staff_fluctuation_ranking_table = reactive({
	xArr: [],
	dataArr: [],
});
const getManPowerRank = async () => {
	const { httpStatusCode, data } = await getManPowerRankList();
	if (httpStatusCode === 200) {
		data.records.forEach((item) => {
			staff_fluctuation_ranking_table.xArr.push(item.department);
			staff_fluctuation_ranking_table.dataArr.push(item.fluctuating_num);
		});
	}
};
// endregion

// region 公司人员统计表
const company_personnel_stats_table = ref([]);
//中间
let centerData = ref([
	{
		title: "公司总人数",
		value: 0,
	},
	{
		title: "公司新增人数",
		value: 0,
	},
	{
		title: "公司流失人数",
		value: 0,
	},
]);
let company_personnel_stats_charts = reactive({
	sex: [
		{
			name: "男生",
			value: 50,
		},
		{
			name: "女生",
			value: 60,
		},
	],
	party: [
		{
			name: "党员",
			value: 0,
		},
		{
			name: "非党员",
			value: 0,
		},
	],
});
const zbrs = ref(0); // 在编人数
const fzbrs = ref(0); // 非在编人数
const getCompanyPersonnelStats = async () => {
	const { httpStatusCode, data } = await getManPowerCompanyList();
	if (httpStatusCode === 200) {
		company_personnel_stats_table.value = data.records;
		zbrs.value = company_personnel_stats_table.value[0]["permanent staff_num"];
		fzbrs.value = company_personnel_stats_table.value[0]["non_pmnt staff_num"];
		centerData.value[0].value = data.records[0].total_num;
		centerData.value[1].value = data.records[0].new_num;
		centerData.value[2].value = data.records[0].turnover_num;

		company_personnel_stats_charts.sex.forEach((item) => {
			if (item.name === "男生") {
				item.value = data.records[0].male_num;
			} else {
				item.value = data.records[0].female_num;
			}
		});

		company_personnel_stats_charts.party.forEach((item) => {
			if (item.name === "党员") {
				item.value = data.records[0].party_members;
			} else {
				item.value = data.records[0].non_party_members;
			}
		});
	}
};
// endregion

// region 部门人力成本
const department_manpower_cost = ref([]);
const getDepartmentManpowerCost = async () => {
	const { httpStatusCode, data } = await getManPowerCostList();
	if (httpStatusCode === 200) {
		department_manpower_cost.value = data.records.map((item) => {
			// const price = item.departmental_costs.substring(0, item.departmental_costs.length - 1) * 1000
			let price = Math.round(item.departmental_costs / 1000);
			// const price = item.departmental_costs.substring(
			// 	0,
			// 	item.departmental_costs.length - 1
			// );
			return {
				name: item.department,
				value: price,
			};
		});
	}
};

// endregion

// region 员工职级列表
let tableHeight2 = ref();
const employee_grade_list = ref([]);
let gradeConfig = ref({
	header: [
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>姓名</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>性别</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>职级</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>部门</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	rowNum: 7,
});
const defalutDepartment = ref(); // 默认显示员工职级列表的部门名称
let performConfig = ref({
	header: [
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>排名</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>部门名称</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>绩效等级</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(3).fill("center"),
	rowNum: 7,
});
const getEmployeeGradeList = async (department) => {
	const { httpStatusCode, data } = await getManPowerRankingList(department);
	if (httpStatusCode === 200) {
		employee_grade_list.value = data.records;
		if (data.records) {
			gradeConfig.value.data = data.records.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.staff_name}</span>`,
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.gender}</span>`,
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.title}</span>`,
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.department}</span>`,
				];
			});
		}
	}
};

const clickItem = () => {
	showDepartmentPerformance.value = false;
	getEmployeeGradeList({
		department: defalutDepartment.value,
	});
};

// endregion

// region 部门绩效列表
const department_performance_list = ref([]);
const getDepartmentPerformanceList = async () => {
	const { httpStatusCode, data } = await getManPowerDepartmentList();
	if (httpStatusCode === 200) {
		debugger;
		department_performance_list.value = data.records;
		if (data.records) {
			performConfig.value.data = data.records.map((item, index) => {
				return [
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">
            ${index + 1}</span>`,
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.department}</span>`,
					`<span style="font-size: 12px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;">${item.kpi_score}</span>`,
				];
			});
		}
	}
};
// 是否选中绩效排行
let showDepartmentPerformance = ref(false);
let achieveSort = () => {
	showDepartmentPerformance.value = true;
	getDepartmentPerformanceList();
};
// endregion

// region 员工画像
let selectArr = ref([]);
const titleMap = {
	age: "年龄",
	department: "部门",
	gender: "性别",
	education: "学历",
};
const getManPowerPortraitSelect = async () => {
	const { data, httpStatusCode } = await getManPowerPortraitSelectList();
	if (httpStatusCode === 200) {
		selectArr.value = data.records.map((item) => {
			return {
				title: titleMap[item.select_name],
				titleKey: item.select_name,
				options: item.strings.split(",").map((subItem) => ({
					label: subItem,
					value: subItem,
				})),
			};
		});
	}
};
const employeePortrait = ref({
	department: "",
	age: "",
	gender: "",
	education: "",
});
const employeePortraitList = ref([]);
const getEmployeePortrait = async () => {
	const { httpStatusCode, data } = await getManPowerPortraitList(
		employeePortrait.value
	);
	if (httpStatusCode === 200) {
		employeePortraitList.value = data.records;
	}
};

/**
 * 展示当前员工画像
 */
const viewPic = () => {};

/**
 * 切换员工画像table数据
 * @param id
 */
watch(
	() => employeePortrait.value,
	() => {
		getEmployeePortrait();
	},
	{
		deep: true,
	}
);
// endregion

// region 人力看板_部门
let treeOrgData = {};
// 组装组织结构图 所需要的数据格式
const buildTree = (data) => {
	const map = new Map();
	data.forEach((item) => {
		map.set(item.path, {
			id: item.id,
			label: item.name,
			path: item.path,
			type: item.type,
			is_group: item.is_group,
			is_internal: item.is_internal,
			is_public: item.is_public,
			external_type: item.external_type,
			children: [],
		});
	});
	const tree = [];
	for (const [path, node] of map.entries()) {
		if (path.length === 8) {
			// 第一级节点
			tree.push(node);
		} else {
			// 非第一级节点
			const parentPath = path.slice(0, -4);
			const parentNode = map.get(parentPath);
			parentNode.children.push(node);
			node.pid = parentNode.id;
		}
	}
	return tree;
};

const getTreeOrgData = async () => {
	const { httpStatusCode, data } = await getManPowerDepartmentSelectList();
	if (httpStatusCode === 200) {
		treeOrgData = buildTree(data.records)[0];
		// 组织架构请求成功后，请求员工职级列表
		await getEmployeeGradeList({
			department: treeOrgData.children[0].label,
		});
		defalutDepartment.value = treeOrgData.children[0].label; // 默认显示员工职级列表的部门名称
	}
};

// 点击了节点
const onNodeClick = (data) => {
	if (data.type === "Account") {
		showDepartmentPerformance.value = true;
		getDepartmentPerformanceList();
	} else {
		showDepartmentPerformance.value = false;
		defalutDepartment.value = data.label;
		getEmployeeGradeList({
			department: data.label,
		});
	}
};
// endregion

const getPageData = async () => {
	await getLickList();
	await getManPowerTotal();
	await getManPowerRank();
	await getCompanyPersonnelStats();
	await getDepartmentManpowerCost();
	// await getEmployeeGradeList()
	await getManPowerPortraitSelect();
	await getEmployeePortrait();
	await getTreeOrgData();
};

onMounted(async () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		tableHeight1.value = calcHeight("lf-top-cn");
		tableHeight2.value = calcHeight("rg-bottom-cn");
		tableHeight3.value = calcHeight("table-container");
		window.addEventListener("resize", screenResize);
		await getPageData();
		await nextTick(() => {
			initAllCharts();
		});
	}
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
});
</script>
<style lang="scss" scoped>
@import "./powerStyle.scss";

.notActive {
	width: 54px;
}
.active {
	width: 104px;
}
</style>
